<template>
	<view class="container">
		<view class="header">
			<h3 class="title">大荔智慧执法检查单</h3>
		</view>
			<view class="form">
				<view class="tabs">
					<up-tabs :list="list1" @click="changeTab"></up-tabs>
				</view>
				<view class="content"  v-if="flag">
					<view class="companyInfo">
						<span class="logo"><up-icon name="order" color="#2979ff" size="28" label="企业信息"></up-icon></span>
						<view class="box">
							<view class="upform">
								<up-form :model="model" labelWidth="180" :rules="rules" labelAlign="left" ref="form"
									label-position="top">
									<up-form-item borderBottom="true" prop="name" label="1. 企业名称" required>
										<up-input v-model="model.name" :confirmType="null">
										</up-input>
									</up-form-item>
									<up-form-item borderBottom="true" prop="image" label="2. 请上传营业执照照片">
										<view>
											<Upload :fileList="model.image" @update:fileList="updateFileList"
												:maxCount="2" />
										</view>
									</up-form-item>
								</up-form>
							</view>
						</view>
					</view>
					<view class="enforcementInfo">
						<span class="logo"><up-icon name="info-circle" color="#2979ff" size="25"
								label="执法信息"></up-icon></span>
						<view class="box">
							<view class="upform">
								<up-form :model="model1" labelWidth="180" labelAlign="left" ref="form" label-position="top">
									<up-form-item borderBottom="true" prop="companyName" label="3. 执法单位名称" required>
										<u-picker :show="showPicker" :columns="[companyTypes]" keyName="label"
											@confirm="handleConfirm" @cancel="handleCancel" prop="companyName"></u-picker>
									</up-form-item>
									<up-form-item borderBottom="true" prop="name" label="4. 执法人员姓名" required>
										<up-input v-model="model1.name" :confirmType="null">
										</up-input>
									</up-form-item>
									<up-form-item borderBottom="true" prop="image" label="5. 执法人员证件照片">
										<view>
											<Upload :fileList="model1.image" @update:fileList="updateFileList"
												:maxCount="2" />
										</view>
									</up-form-item>
								</up-form>
							</view>
						</view>
					</view>
			
					<view class="checkInfo">
						<span class="logo"><up-icon name="eye" color="#2979ff" size="25" label="检查信息"></up-icon></span>
						<view class="box">
							<view class="upform">
								<up-form :model="model2" labelWidth="180" labelAlign="left" ref="form" label-position="top">
									<up-form-item borderBottom="true" prop="companyName" label="6. 检查时间" required>
										<up-datetime-picker hasInput :show="show" v-model="nowTime"
											mode="datetime"></up-datetime-picker>
									</up-form-item>
									<up-form-item borderBottom="true" prop="name" label="7. 检查类型" required>
										<up-radio-group v-model="checkValue" placement="column"
											@change="groupcheckListChange">
											<up-radio :customStyle="{marginBottom: '8px'}"
												v-for="(item, index) in checkList" :key="index" :label="item.name"
												:name="item.name" @change="radiocheckListChange">
											</up-radio>
										</up-radio-group>
									</up-form-item>
									<up-form-item borderBottom="true" prop="image" label="8. 组织方式">
										<view>
											<up-radio-group v-model="sysValue" placement="column"
												@change="groupsysListChange">
												<up-radio :customStyle="{marginBottom: '8px'}"
													v-for="(item, index) in sysList" :key="index" :label="item.name"
													:name="item.name" @change="radiosysListChange">
												</up-radio>
											</up-radio-group>
										</view>
									</up-form-item>
									<up-form-item borderBottom="true" prop="image" label="9. 检查方式">
										<view>
											<up-radio-group v-model="checkMethodValue" placement="column"
												@change="groupcheckMethodChange">
												<up-radio :customStyle="{marginBottom: '8px'}"
													v-for="(item, index) in checkMethodList" :key="index" :label="item.name"
													:name="item.name" @change="radiocheckMethodChange">
												</up-radio>
											</up-radio-group>
										</view>
									</up-form-item>
									<up-form-item borderBottom="true" prop="image" label="10. 检查结果">
										<view>
											<up-radio-group v-model="resultValue" placement="column"
												@change="groupresultListChange">
												<up-radio :customStyle="{marginBottom: '8px'}"
													v-for="(item, index) in resultList" :key="index" :label="item.name"
													:name="item.name" @change="radioresultListChange">
												</up-radio>
											</up-radio-group>
										</view>
									</up-form-item>
								</up-form>
							</view>
					</view>
					<view class="box1">
						<view class="upform">
							<up-form :model="model3" labelWidth="180" labelAlign="left" ref="form" label-position="top">
								<up-form-item prop="uploadCheck" label="11. 检查单上传" required>
									<Upload :fileList="model3.uploadCheck" @update:fileList="updateFileList"
										:maxCount="2" />
								</up-form-item>
							</up-form>
						</view>
					</view>
					<view class="btn">
						<up-button type="success" text="暂存" class="saveBtn" @click="save"></up-button>
						<up-button type="primary" text="成功" class="submitBtn" @click="submit"></up-button>
					</view>
				</view>
				
				<view class="history">
					12311111111111111111111111
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import Upload from "../../components/upload/index.vue";
	import {
		getMenu
	} from '../../config/api.js'

	const flag=ref(true)
	const list1 = reactive([{
			name: '表单填写'
		},
		{
			name: '历史记录'
		},
	])

	function changeTab() {
		flag.value=!flag.value
	}
	const showPicker = ref(false)
	const companyTypes = ref([{
			label: '县发改',
			value: 'county_dev'
		},
		{
			label: '县财政',
			value: 'county_finance'
		},
		{
			label: '县市监',
			value: 'county_market'
		}
	])
	
	const handleConfirm = (value) => {
		console.log('选中值:', value)
		showPicker.value = false
	}

	const handleCancel = () => {
		showPicker.value = false
		console.log('取消选择')
	}
	const model = reactive({
		image: "",
		name: '',
	})
	const model1 = reactive({
		companyName: "",
		name: '',
		image: ''
	})
	const model2 = reactive({
		nowTime: ""
	})
	const model3 = reactive({
		uploadCheck: ''
	})
	const rules = reactive({
		name: [{
			required: true,
			message: '请输入企业名称',
			trigger: ['blur', 'change'],
		}, ],
		realName: [{
			required: true,
			trigger: ['blur', 'change'],
			pattern: /^[\u4e00-\u9fa5]{2,20}$/, // 2-20个中文字符
			validator: (rule, value, callback) => {
				if (!value) {
					callback(new Error('姓名不能为空'));
				} else if (/[0-9]/.test(value)) {
					callback(new Error('姓名不能包含数字'));
				} else if (/[^\u4e00-\u9fa5·\s]/.test(value)) {
					callback(new Error('仅支持中文、间隔号·和空格'));
				} else if (!/^[\u4e00-\u9fa5·\s]{2,20}$/.test(value)) {
					callback(new Error('姓名需2-20个字符(中文、·或空格)'));
				} else {
					callback();
				}
			}

		}],
		phone: [{
				required: true,
				message: '请输入手机号',
				trigger: ['change', 'blur'],
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				trigger: ['change', 'blur'],
			}
		]
	})
	const updateFileList = (newFileList) => {
		model.image = newFileList;
	};

	const checkList = reactive([{
			name: '日常检查',
		},
		{
			name: '专项检查',
		},
		{
			name: '个案检查',
		}
	]);

	const checkValue = ref('日常检查');


	const groupcheckListChange = (n) => {
		console.log('groupcheckListChange', n);
	};

	const radiocheckListChange = (n) => {
		console.log('radiocheckListChange', n);
	};

	const sysList = reactive([{
			name: '日常检查',
		},
		{
			name: '专项检查',
		},
		{
			name: '个案检查',
		}
	]);

	const sysValue = ref('日常检查');


	const groupsysListChange = (n) => {
		console.log('groupsysListChange', n);
	};

	const radiosysListChange = (n) => {
		console.log('radiosysListChange', n);
	};


	const checkMethodList = reactive([{
			name: '日常检查',
		},
		{
			name: '专项检查',
		},
		{
			name: '个案检查',
		}
	]);

	const checkMethodValue = ref('日常检查');


	const groupcheckMethodChange = (n) => {
		console.log('groupcheckMethodChange', n);
	};

	const radiocheckMethodChange = (n) => {
		console.log('radiocheckMethodChange', n);
	};

	const resultList = reactive([{
			name: '合格',
		},
		{
			name: '不合格',
		}
	]);

	const resultValue = ref('合格');


	const groupresultListChange = (n) => {
		console.log('groupresultListChange', n);
	};

	const radioresultListChange = (n) => {
		console.log('radioresultListChange', n);
	};

	const show = ref(false);
	const nowTime = ref(Date.now());
	
	function save(){
		console.log('暂存');
	}
	function submit(){
		console.log('提交');
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			width: 100%;
			padding: 1.5rem;
			text-align: center;
			background: white;
			background: url('/src/static/checkBg.jpg');
			background-size: cover;
			background-position: center;

			.title {
				font-size: 1.2rem;
				font-weight: 600;
				letter-spacing: 1px;
			}
		}

		.form {
			width: 100%;
			height: 78rem;

			.tabs {
				padding-left: 1rem;
			}

			.content {
				width: 100%;
				height: 10rem;

				.box {
					width: 95%;
					/* margin: .4rem auto; */
					margin-top: .6rem;
					border: .1rem solid #ddd;
					border-radius: .3rem;

					.upform {
						width: 88%;
						margin-left: 1.1rem;
					}
				}

				.companyInfo {
					margin-left: 1.5rem;
					margin-top: .5rem;

					.logo {
						font-weight: bold;
					}
				}


				.box1 {
					width: 95%;
					margin-top: .6rem;

					.upform {
						width: 88%;
						margin-left: 2.5rem;
					}
				}

				.enforcementInfo {
					margin-left: 1.5rem;
					margin-top: .8rem;

					.logo {
						font-weight: bold;
					}
				}

				.checkInfo {
					margin-left: 1.5rem;
					margin-top: .8rem;

					.logo {
						font-weight: bold;
					}
				}
			}
		}

		.btn {
			.saveBtn {
				width: 19rem;
				margin-bottom: 1rem;
			}

			.submitBtn {
				width: 19rem;
				margin-bottom: 2rem;
			}
		}

	}
</style>